<template>
	<view>
		<!-- 主体 -->
		<view v-if="!fullAdvShow" class="page page-bottom-bar">
			<!-- 轮播图 -->
			<view class="banner">
				<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
					<swiper class="banner-swipe" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange">
						<swiper-item class="banner-swipe-item w100 h100" v-for="(item, index) in banners" :key="index">
							<view class="banner-swipe-img w100 h100 bg-cover"
							:style="{backgroundImage: 'url(' + item.img + ')'}"
							@click="goUrl(item.type, item.url, item.appid)"
							>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 预订信息 -->
			<view class="book-tab box-shadow">
				<view class="book-tab-bar flex-row-center">
					<view class="item" :class="{'active' : bookCurrent === '2'}" @tap="bookChange('2')">全日房</view>
					<view class="item" :class="{'active' : bookCurrent === '1'}" @tap="bookChange('1')">时租房</view>
				</view>
				<view class="book-tab-con">
					<view class="part part1 flex-row-start" @tap="openCalendar">
						<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-time.png"></image>
						<view class="date-box flex-row-between">
							<view class="box">
								<view class="font12 font-646464">入住</view>
								<view class="date flex-row-start">
									<uni-dateformat class="font15 font-b" :date="calendar.startDate" format="MM月dd日"></uni-dateformat>
									<text class="font12 font-323232 week">{{calendar.startWeek}}</text>
								</view>
							</view>
							<view v-if="bookCurrent === '2'" class="tag">{{calendar.dayCount}}晚</view>
							<view v-if="bookCurrent === '2'" class="box">
								<view class="font12 font-646464">离店</view>
								<view class="date flex-row-start">
									<uni-dateformat class="font15 font-b" :date="calendar.endDate" format="MM月dd日"></uni-dateformat>
									<text class="font12 font-323232 week">{{calendar.endWeek}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="part part2 flex-row-between">
						<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-serach.png"></image>
						<view class="search flex-row-between">
							<view class="font15 text ellipsis" :class="{'grey': keyword.name == ''}" @click="goNext('/pages/hotel/hotelSearch')">{{keyword.name ? keyword.name : '品牌/商圈/地铁'}}</view>
							<uni-icons v-if="keyword.name != ''" type="clear" size="18" color="#c0c0c0" @tap="Onclear"></uni-icons>
						</view>
						<view class="font15 font-b" @click="goNext('/pages/hotel/city')">{{city.name.substring(0,2)}}</view>
						<uni-icons type="arrowright" size="12" :color="themeColor"></uni-icons>
					</view>
				</view>
				<view class="book-btn font15 font-ffffff flex-row-center" @tap="goHotel">查询酒店</view>
			</view>
			<!-- 快捷入口 -->
			<view v-if="entry.length > 0" class="entry box-shadow">
				<scroll-view class="entry-x" scroll-x="true" enhanced="true">
					<block v-for="(item, index) in entry" :key="index">
						<view class="item flex-column-center tc" @click="goUrl(item.type, item.url, item.appid)">
							<view class="bg-cover image" :style="{backgroundImage: 'url(' + imgPath + item.img + ')'}"></view>
							<view class="text font12">{{item.title}}</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 广告位 -->
			<image v-if="adv" class="w100" style="margin-top: 20rpx;" :src="imgPath + adv.img" mode="widthFix" @click="goUrl(adv.type, adv.url, adv.appid)"></image>
			<!-- 活动入口 -->
			<view v-if="sensitive && activity.length > 0" class="activity" :style="{marginTop: adv ? '0' : '20rpx'}">
				<scroll-view class="activity-x" scroll-x="true" enhanced="true">
					<block v-for="(item, index) in activity" :key="index">
						<view class="bg-cover item" :style="{backgroundImage: 'url(' + imgPath + item.img + ')'}" @click="goUrl(item.type, item.url, item.appid)"></view>
					</block>
				</scroll-view>
			</view>
			<!-- 拼团促销 -->
			<view v-if="sensitive && group.length > 0" class="group box-shadow box-goods">
				<view class="box-title flex-row-between" @click="goNext('/pages/group/list')">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-pintuan.png"></image>
					<view class="flex-1 font16 font-b">拼团促销</view>
					<view class="font12 font-646464">更多</view>
					<uni-icons type="arrowright" size="10" color="#060606"></uni-icons>
				</view>
				<block v-for="(item, index) in group" :key="index">
					<view class="item flex-row-start flex-start" @click="goNext('/pages/group/detail?id=' + item.goods_id)">
						<view class="image bg-cover" :style="{backgroundImage: 'url(' + imgPath + item.logo + ')'}"></view>
						<view class="info">
							<view class="name font15 ellipsis">{{item.name}}</view>
							<view class="group-p1 font12 font-646464">单买价￥{{item.price}}&nbsp;&nbsp;&nbsp;已售{{item.sales_actual+item.sales_initial}}</view>
							<view class="group-p2 flex-row-start">
								<view class="font12">{{item.spell_number}}人团</view>
								<view class="font12 font-assist">
									<text>￥</text>
									<text class="font14">{{utils.priceStr(item.group_price)[0]}}.</text>
									<text>{{utils.priceStr(item.group_price)[1]}}</text>
								</view>
							</view>
						</view>
						<view class="go">去拼团</view>
					</view>
				</block>
			</view>
			<!-- 酒店推荐 -->
			<view class="recommend box-shadow box-goods">
				<view class="box-title flex-row-between">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-jiudian.png"></image>
					<view class="flex-1 font16 font-b">酒店推荐</view>
				</view>
				<block v-for="(item, index) in getRecommend" :key="index">
					<view class="item flex-row-start flex-start" @click="goNext('/pages/hotel/hotelDetail?id=' + item.id)">
						<view class="image bg-cover" :style="{backgroundImage: 'url(' + item.logo + ')'}"></view>
						<view class="info">
							<view class="name font15 ellipsis">{{item.name}}</view>
							<view class="recommend-p1 flex-row-start">
								<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-lan.png"></image>
								<view class="font12 font-969696">{{item.areaName}}</view>
							</view>
							<view class="recommend-p2 font12">
								<text class="font-assist">{{item.score}}分</text>
								<text class="font-969696">{{item.number}}条评论</text>
							</view>
							<view class="recommend-p3 flex-row-start flex-wrap" v-if="item.tags && item.tags.length > 0">
								<view class="tag" v-for="(tag, i) in item.tags" :key="i">{{tag}}</view>
							</view>
						</view>
						<view class="avg-price font-assist font12">￥<text class="font18">{{item.price}}</text>起</view>
					</view>
				</block>
				<view v-if="recommend.length > recommendShow.length" class="drop flex-row-center" @tap="getallRecommend">
					<text class="font11 font-646464">展开</text>
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/font-drop.png"></image>
				</view>
			</view>
			<!-- 酒店品牌 -->
			<view class="brand">
				<view class="brand-title font15 font-b">酒店品牌</view>
				<scroll-view class="brand-x" scroll-x="true" enhanced="true">
					<block v-for="(item, index) in brand" :key="index">
						<view class="item flex-column-center tc" @click="goNext('/pages/hotel/brandDetail?id=' + item.id)">
							<view class="bg-cover image" :style="{backgroundImage: 'url(' + item.ui_img + ')'}"></view>
							<view class="text font12">{{item.name}}</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 日历组件 -->
		<JCalendar ref="calendar" :themeColor="themeColor" :mode="calendar.mode" :startDate="calendar.startDate" :endDate="calendar.endDate" :dayCount="calendar.dayCount" @callback="bookCalendar"></JCalendar>
		<!-- 底部菜单 -->
		<ComTabBar v-if="!fullAdvShow" :selected="0" id="tabBar"></ComTabBar>
		<!-- 半屏广告 -->
		<uni-popup ref="banners1" type="center">
			<view class="banners1-box">
				<uni-swiper-dot :info="banners1" :current="banner1Current" mode="round" :dotsStyles="dotsStyles">
					<swiper class="banner1-swipe" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange1">
						<swiper-item class="banner1-swipe-item w100 h100" v-for="(item, index) in banners1" :key="index">
							<view class="banner1-swipe-img w100 h100 bg-cover"
								:style="{backgroundImage: 'url(' + (imgPath + item.img) + ')'}"
								@click.stop="goUrl(item.type, item.url, item.appid)"
							>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<image class="banners1-close" src="https://static.newbeaconhotels.com/app/hotel/close.png" @click="closeBanners1"></image>
		</uni-popup>
		<!-- 全屏广告 -->
		<view v-if="fullAdvShow" class="home-full">
			<view class="image w100 h100 bg-cover"
				:style="{backgroundImage: 'url(' + (imgPath + fullAdv.img) + ')'}"
				@click.stop="goUrl(fullAdv.type, fullAdv.url, fullAdv.appid)"
			></view>
			<view class="btn" @click.stop="closeFullAdv">跳过 {{wait}}S</view>
		</view>
	</view>
</template>

<script module="utils" lang="wxs" src="../../common/js/utils.wxs"></script>
<script>
	import ComTabBar from '@/components/j-ComTabBar/index.vue';
	import JCalendar from '@/components/j-calendar/index.vue';
	export default {
		components: { ComTabBar, JCalendar },
		data() {
			return {
				themeColor: '#03004c', // 主题颜色
				imgPath: this.$Config.http_static, // 图片头
				// 轮播图
				banners: [],
				bannerCurrent: 0,
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 30,
					border: '0 rgba(255,255,255,.4) solid',
					backgroundColor: 'rgba(255,255,255,.4)',
					selectedBackgroundColor: '#ffffff',
					selectedBorder: '0 #ffffff solid'
				},
				// 弹窗广告
				banners1: [],
				banner1Current: 0,
				// 全屏广告
				fullAdv: null,
				fullAdvShow: false,
				wait: 5,
				timer: null,
				// 快捷入口
				entry: [],
				// 广告位
				adv: null,
				// 活动入口
				activity: [],
				// 拼团促销
				group: [],
				// 酒店推荐
				recommend: [],
				recommendShow: [],
				// 酒店品牌
				brand: [],
				// 预订的tab切换,2=全日房，1=时租房
				bookCurrent: '2',
				// 日历
				calendar: {
					mode: '2', // 1标准模式，2酒店模式
					startDate: '', // 默认入住日期
					endDate: '', // 默认离店日期
					startWeek: '',
					endWeek: '',
					dayCount: '1'
				},
				// 城市(默认武汉)
				city: { id: 203, name: '武汉' },
				// 关键字(默认无)
				keyword: { id: '', name: '' },
				// 是否显示敏感板块（商城）
				sensitive: true,
			}
		},
		onLoad: function() {
			// 从缓存中拿取版本信息
			// #ifdef MP-WEIXIN
			this.sensitive = uni.getStorageSync('version').conshow
			// #endif
			
			// 插图列表（轮播 + 快捷入口）
			this.$Http({
				url: 'getImage',
				data: {},
			}).then(res => {
				if (res.code == 1) {
					if (res.data.data.index) {
						let arr = res.data.data.index
						arr.forEach(item => {
							item.img = this.$Config.http_static + item.img
						})
						this.banners = arr
					}
					if (res.data.data.play) {
						this.entry = res.data.data.play
					}
					if (res.data.data.fuli) {
						this.activity = res.data.data.fuli
					}
					if (res.data.data.new) {
						this.adv = res.data.data.new[0]
					}
					// 全屏广告(1张)
					if (res.data.data.ad) {
						if (res.data.data.ad.length > 0) {
							this.fullAdv = res.data.data.ad[0]
							
							if (this.fullAdv) {
								this.fullAdvShow = true
								this.timer = setInterval(() => {
									this.wait--
									if (this.wait === 0) {
										clearInterval(this.timer)
										this.fullAdvShow = false
									}
								}, 1000)
							}
						}
					}
					// 半屏弹窗广告(n张)
					if (res.data.data.popup) {
						this.banners1 = res.data.data.popup
					}
				}
			});
			
			// 酒店品牌
			this.$Http({
				url: 'brand'
			}).then(res => {
				let arr = res.data
				arr.forEach(item => {
					item.ui_img = this.$Config.http_static + item.ui_img
				})
				this.brand = arr
			});
			
			// 拼团促销列表
			this.$Http({
				url: 'getGoodsList',
				data: {
					is_recommend: 1
				}
			}).then(res => {
				if (res.code == 1) {
					this.group = res.data.data
				}
			});
			
			// 推荐酒店列表
			this.$Http({
				url: 'hotelRecommend'
			}).then(res => {
				if (res.code == 1) {
					let arr = res.data
					arr.forEach(item => {
						item.logo = this.$Config.http_static + item.logo
					})
					this.recommend = arr
					this.recommendShow = this.recommend.slice(0,2)
				}
			});
		},
		onShow: function() {
			// 隐藏默认菜单
			uni.hideTabBar()
			
			// 开启监听选择城市事件
			uni.$on('chooseCity', (res) => {
				console.log(res)
				this.city = res
			})
			
			// 开启监听选择商圈事件
			uni.$on('chooseKey', (res) => {
				this.keyword = res
			})
		},
		onUnload:function(){
			// 关闭监听选择城市事件
			uni.$off('chooseCity')
			
			// 关闭监听选择商圈事件
			uni.$off('chooseKey')
		},
		computed: {
			getRecommend () {
				return this.recommendShow
			}
		},
		methods: {
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			// 半屏广告change
			swiperChange1(e) {
				this.banner1Current = e.detail.current;
			},
			// 关闭半屏广告
			closeBanners1 () {
				this.$refs.banners1.close()
			},
			// 关闭全屏广告
			closeFullAdv () {
				clearInterval(this.timer)
				this.fullAdvShow = false
			},
			// 预订change
			bookChange(type) {
				this.bookCurrent = type
				this.calendar.mode = type
				this.$refs.calendar.initDate({ mode: type })
			},
			// 打开日历
			openCalendar () {
				this.$refs.calendar.openCalendar()
			},
			// 选择的预订日期
			bookCalendar (date) {
				console.log('首页选择的日期' + JSON.stringify(date))
				this.calendar = date
			},
			// 点击展开
			getallRecommend () {
				this.recommendShow = this.recommend
			},
			// 清空搜索
			Onclear () {
				this.keyword = { id: '', name: '' }
			},
			// 查询酒店列表
			goHotel () {
				let hotelQuery = {
					city: this.city,
					keyword: this.keyword,
					calendar: this.calendar
				}
				uni.setStorage({key: 'hotelQuery', data: hotelQuery})
				if (this.bookCurrent == '2') {
					uni.navigateTo({ url: '/pages/hotel/hotelList' });
				} else {
					uni.navigateTo({ url: '/pages/hotel/hourRoomList' });
				}
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			},
			// 广告跳转
			goUrl (type, url, appid) {
				this.$base.goUrl(type, url, appid)
			}
		}
	}
</script>

<style lang="less">
	@import url("goods.less");
	@import url("style.less");
</style>
